<template>
	<div class="index">
		<!--<div class="sreePublic">
  		<div id="" style="text-align: center;">
  			<em class="iconfont" @click="vfun_back">&#xe61f;</em>
  		</div>
		新增收货地址
  	</div>-->
		<div>
			<div class="delivery">
				<ul>
					<li>
						<span>收货人：</span>
						<input v-model="deliveryContact" />
					</li>
					<li>
						<span>手机号：</span>
						<input v-model="deliveryPhone" />
					</li>
					<li @click="popupVisible=true">
						<span>省/市/区：</span>
						<span v-model="deliveryArea">{{addressProvince}}{{addressCity}}{{addressXian}}</span>
						<em class="iconfont">&#xe609;</em>

					</li>
					<li>
						<span>详细地址：</span>
						<input v-model="deliveryAddress " />
					</li>

				</ul>
			</div>

			<div class="footer">
				<a @click="addDelivery">保存</a>
			</div>
			<mt-popup v-model="popupVisible" position="bottom">
				<div class="deliverytab">
					<p class="delivery-th">
						<span @click="popupVisible=false">取消</span>
						<span @click="popupVisible=false">完成</span>
					</p>
					<div style="clear: both;">
						<mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5"></mt-picker>
						<!--<mt-picker :slots="streetSlots" ref="picker" class="picker" @change="onStreetChange" :visible-item-count="5" ></mt-picker >-->
					</div>

				</div>
			</mt-popup>
		</div>
	</div>
</template>

<script>
	import * as address from '../../assets/data/address';
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui'; //引入弹框

export default {
  name: 'addDelivery',
  data () {
    return {
    	  companyName:'',
        addressSlots: [
          {
            flex: 1,
            defaultIndex: 1,
            values: Object.keys(address),
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot4'
          }, {
            flex: 1,
            values: [],
            className: 'slot5',
            textAlign: 'center'
          }
        ],
        streetSlots: [
          {
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center'
          }
        ],
    	popupVisible:false,
    	single: false,
    	deliveryDefault:'0',
    	deliveryContact:'',
    	deliveryPhone:'',
    	deliveryDefault:'',
    	deliveryArea:'',
    	deliveryAddress:'',
    	addressProvince: '省',
      addressCity: '市',
      addressXian: '区',
//    addressStreet: '街道',
    }
  },
  methods:{
  	onAddressChange(picker, values) {
        let sheng = Object.keys(address);
        let shi = Object.keys(address[values[0]]);
        let xian = address[values[0]][shi[0]];
        shi.forEach((item,index,arr)=>{
        	if(values[1]==item){
        		xian = address[values[0]][shi[index]];
        	}
        })
        this.xianObj = xian;
        picker.setSlotValues(1, shi);
        this.addressProvince = values[0];
        this.addressCity = values[1];
        this.addressXian = values[2];
        picker.setSlotValues(2, Object.keys(xian));
      },
//     onStreetChange(picker, values){
//      this.addressStreet = values[0]
//    },
//	 onValuesChange(picker, values) {
//    if (values[0] > values[1]) {
//      picker.setSlotValues(1, values[0]);
//    }
//  },


			addDelivery() {
				if(this.deliveryContact == '') {
					MessageBox('提示', '请填写收货人');
					return false;
				}
				if(this.deliveryPhone == '') {
					MessageBox('提示', '请填写联系电话');
					return false;
				} else {
					let str = this.Public.rules.phone;
					if(str.test(this.deliveryPhone) != true) {
						MessageBox('提示', '请填写正确的联系电话');
						return false;
					}
				}
				//		if (this.deliveryArea=='') {
				//			MessageBox('提示', '请选择地区');
				//			return false;
				//		}
				if(this.deliveryAddress == '') {
					MessageBox('提示', '请填写详细地址');
					return false;
				}

				if(this.single) {
					this.deliveryDefault = '1'
				} else {
					this.deliveryDefault = '0'
				}
				this.deliveryArea = ['中国', this.addressProvince, this.addressCity, this.addressXian];
				this.axios({
					method: 'POST',
					url: "/v3/member/deliverys",
					params: {
						"deliveryArea": JSON.stringify(this.deliveryArea)
					},
					data: {
						"deliveryContact": this.deliveryContact,
						"deliveryPhone": this.deliveryPhone,
						"deliveryAddress": this.deliveryAddress,
					}
				}).then((res) => {
					this.Public.vFun_openSuccess('操作成功');
					history.back();

				}).catch((err) => {
					this.Public.vFun_openError(err.response.data);
				});
			},
			vfun_back() {
				history.back();
			},
		},
		watch: {
			'addressXian': {
				handler(val, oval) {
					let street = this.xianObj[this.addressXian]
					this.streetSlots[0].values = street
				}
			}
		},
		created() {

		},
		mounted() {

		},
		activated(){
			this.$nextTick(() => {
				setTimeout(() => { //这个是一个初始化默认值的一个技巧
					this.addressSlots[0].defaultIndex = 0;
				}, 100);
			});

  		document.querySelector('#vue_id_title').innerHTML="新增收货地址";

		},


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	* {
		transition: 0.2s;
	}

	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	.index {
		box-sizing: border-box;
		margin-bottom: 1.5rem;
	}

	.delivery {
	}

	.delivery li {
		border-bottom: 1px solid #bbb;
		box-sizing: border-box;
		background: #fff;
		padding: 4% 6%;
	}

	.delivery input {
		border: 0;
		width: 70%;
	}

	.footer {
		position: fixed;
		background: #fff;
		bottom: 0;
		width: 100%;
	}

	.footer a {
		display: block;
		width: 98%;
		margin-left: 1%;
		margin-bottom: 1%;
		color: #fff;
		text-align: center;
		height: 1.4rem;
		background: #D50B0A;
		line-height: 1.4rem;
    border-radius: 4px;
    font-size: 16px;
	}

	.delivery .iconfont {
		float: right;
		color: #ccc;
		font-size: 14px;
	}

	.deliverytab {
		width: 10rem;
		height: 9rem;
	}

	.delivery-th {
		margin-top: 0.4rem;
		color: #D50B0A;
	}

	.delivery-th span:first-child {
		float: left;
		margin-left: 5%;
	}

	.delivery-th span:last-child {
		float: right;
		margin-right: 5%;
	}
</style>
